<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2370410" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">客服咨询灰</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">在线咨询</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">我要反馈</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">常见问题 帮助</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69b;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
                <div class="name">咨询</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73c;</span>
                <div class="name">意见反馈-填充</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">常见问题</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d7;</span>
                <div class="name">票据</div>
                <div class="code-name">&amp;#xe7d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">扫一扫</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">工具1</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">优惠券</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">发票</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">意见反馈</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">订单</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe768;</span>
                <div class="name">积分</div>
                <div class="code-name">&amp;#xe768;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">门票</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">会员中心</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">咨询</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe789;</span>
                <div class="name">会员等级</div>
                <div class="code-name">&amp;#xe789;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">租赁管理</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef50;</span>
                <div class="name">会员</div>
                <div class="code-name">&amp;#xef50;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef62;</span>
                <div class="name">优惠券</div>
                <div class="code-name">&amp;#xef62;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5e1;</span>
                <div class="name">积分</div>
                <div class="code-name">&amp;#xf5e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xebb9;</span>
                <div class="name">地址</div>
                <div class="code-name">&amp;#xebb9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe702;</span>
                <div class="name">意见反馈</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">咨询</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">会员积分</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">发票管理系统</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">会员</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">地址</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee96;</span>
                <div class="name">地址</div>
                <div class="code-name">&amp;#xee96;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">扩展VIP</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">vipdiamond-f</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">vipdiamond-l</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">积分</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">地址</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ae;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">钱包</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">收 藏 (1)</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">已领取</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">钱袋</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">设备借还</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">借出</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">发票</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">待评价</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">待使用</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">售后</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">待付款</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">乐才icon_42合同-已过期</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">已过期</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">已使用</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">优惠券</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">导览</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e6;</span>
                <div class="name">导览</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">停车</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">演出</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe741;</span>
                <div class="name">园内演出</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">演出-01</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">优惠券</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xebb6;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xebb6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea8d;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xea8d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea9f;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xea9f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeafe;</span>
                <div class="name">发现</div>
                <div class="code-name">&amp;#xeafe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb19;</span>
                <div class="name">发现</div>
                <div class="code-name">&amp;#xeb19;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb4b;</span>
                <div class="name">购物袋</div>
                <div class="code-name">&amp;#xeb4b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">购物</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">生态 环境</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">kaipiaozhushou</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe770;</span>
                <div class="name">icon_food</div>
                <div class="code-name">&amp;#xe770;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe771;</span>
                <div class="name">icon_houserent</div>
                <div class="code-name">&amp;#xe771;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe773;</span>
                <div class="name">icon_shopping</div>
                <div class="code-name">&amp;#xe773;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">全部</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">合租</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">地图找房</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">我的钱包</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">景点</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">停车</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf3ab;</span>
                <div class="name">bath</div>
                <div class="code-name">&amp;#xf3ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf3ad;</span>
                <div class="name">building-type-400000-18</div>
                <div class="code-name">&amp;#xf3ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b2;</span>
                <div class="name">发票</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c7;</span>
                <div class="name">演出</div>
                <div class="code-name">&amp;#xe8c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf3a2;</span>
                <div class="name">Bridgeinterruption</div>
                <div class="code-name">&amp;#xf3a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf3a4;</span>
                <div class="name">building-type-140000-18</div>
                <div class="code-name">&amp;#xf3a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf3a5;</span>
                <div class="name">building-type-300000-18</div>
                <div class="code-name">&amp;#xf3a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf3a6;</span>
                <div class="name">building-type-199999-18</div>
                <div class="code-name">&amp;#xf3a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf3a7;</span>
                <div class="name">building-type-180000-18</div>
                <div class="code-name">&amp;#xf3a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf3a8;</span>
                <div class="name">building-15</div>
                <div class="code-name">&amp;#xf3a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf3a9;</span>
                <div class="name">building-type-700000-18</div>
                <div class="code-name">&amp;#xf3a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf3aa;</span>
                <div class="name">car-15</div>
                <div class="code-name">&amp;#xf3aa;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1630489096301') format('woff2'),
       url('iconfont.woff?t=1630489096301') format('woff'),
       url('iconfont.ttf?t=1630489096301') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-kefuzixunhui"></span>
            <div class="name">
              客服咨询灰
            </div>
            <div class="code-name">.icon-kefuzixunhui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zaixianzixun"></span>
            <div class="name">
              在线咨询
            </div>
            <div class="code-name">.icon-zaixianzixun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-woyaofankui"></span>
            <div class="name">
              我要反馈
            </div>
            <div class="code-name">.icon-woyaofankui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-changjianwentibangzhu"></span>
            <div class="name">
              常见问题 帮助
            </div>
            <div class="code-name">.icon-changjianwentibangzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi1"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zixun1"></span>
            <div class="name">
              咨询
            </div>
            <div class="code-name">.icon-zixun1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yijianfankui-tianchong"></span>
            <div class="name">
              意见反馈-填充
            </div>
            <div class="code-name">.icon-yijianfankui-tianchong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-changjianwenti"></span>
            <div class="name">
              常见问题
            </div>
            <div class="code-name">.icon-changjianwenti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bill"></span>
            <div class="name">
              票据
            </div>
            <div class="code-name">.icon-bill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-saoyisao"></span>
            <div class="name">
              扫一扫
            </div>
            <div class="code-name">.icon-saoyisao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongju1"></span>
            <div class="name">
              工具1
            </div>
            <div class="code-name">.icon-gongju1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youhuiquan-copy"></span>
            <div class="name">
              优惠券
            </div>
            <div class="code-name">.icon-youhuiquan-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fapiao1"></span>
            <div class="name">
              发票
            </div>
            <div class="code-name">.icon-fapiao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yijianfankui"></span>
            <div class="name">
              意见反馈
            </div>
            <div class="code-name">.icon-yijianfankui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingdan"></span>
            <div class="name">
              订单
            </div>
            <div class="code-name">.icon-dingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jifen2"></span>
            <div class="name">
              积分
            </div>
            <div class="code-name">.icon-jifen2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan3"></span>
            <div class="name">
              门票
            </div>
            <div class="code-name">.icon-ziyuan3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huiyuanzhongxin"></span>
            <div class="name">
              会员中心
            </div>
            <div class="code-name">.icon-huiyuanzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zixunbeifen"></span>
            <div class="name">
              咨询
            </div>
            <div class="code-name">.icon-zixunbeifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huiyuandengji"></span>
            <div class="name">
              会员等级
            </div>
            <div class="code-name">.icon-huiyuandengji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zulinguanli"></span>
            <div class="name">
              租赁管理
            </div>
            <div class="code-name">.icon-zulinguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huiyuan1"></span>
            <div class="name">
              会员
            </div>
            <div class="code-name">.icon-huiyuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youhuiquan1"></span>
            <div class="name">
              优惠券
            </div>
            <div class="code-name">.icon-youhuiquan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jifen1"></span>
            <div class="name">
              积分
            </div>
            <div class="code-name">.icon-jifen1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dizhi2"></span>
            <div class="name">
              地址
            </div>
            <div class="code-name">.icon-dizhi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-drxx66"></span>
            <div class="name">
              意见反馈
            </div>
            <div class="code-name">.icon-drxx66
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zixun"></span>
            <div class="name">
              咨询
            </div>
            <div class="code-name">.icon-zixun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huiyuanjifen"></span>
            <div class="name">
              会员积分
            </div>
            <div class="code-name">.icon-huiyuanjifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fapiaoguanlixitong"></span>
            <div class="name">
              发票管理系统
            </div>
            <div class="code-name">.icon-fapiaoguanlixitong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huiyuan"></span>
            <div class="name">
              会员
            </div>
            <div class="code-name">.icon-huiyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dizhi"></span>
            <div class="name">
              地址
            </div>
            <div class="code-name">.icon-dizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dizhi1"></span>
            <div class="name">
              地址
            </div>
            <div class="code-name">.icon-dizhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kuozhanVIP"></span>
            <div class="name">
              扩展VIP
            </div>
            <div class="code-name">.icon-kuozhanVIP
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vipdiamond-f"></span>
            <div class="name">
              vipdiamond-f
            </div>
            <div class="code-name">.icon-vipdiamond-f
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vipdiamond-l"></span>
            <div class="name">
              vipdiamond-l
            </div>
            <div class="code-name">.icon-vipdiamond-l
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jifen"></span>
            <div class="name">
              积分
            </div>
            <div class="code-name">.icon-jifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan"></span>
            <div class="name">
              地址
            </div>
            <div class="code-name">.icon-ziyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qianbao"></span>
            <div class="name">
              钱包
            </div>
            <div class="code-name">.icon-qianbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang1"></span>
            <div class="name">
              收 藏 (1)
            </div>
            <div class="code-name">.icon-shoucang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yilingqu1"></span>
            <div class="name">
              已领取
            </div>
            <div class="code-name">.icon-yilingqu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiandai"></span>
            <div class="name">
              钱袋
            </div>
            <div class="code-name">.icon-qiandai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiaozhizuomoban-131"></span>
            <div class="name">
              设备借还
            </div>
            <div class="code-name">.icon-tubiaozhizuomoban-131
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiechu"></span>
            <div class="name">
              借出
            </div>
            <div class="code-name">.icon-jiechu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-invoice"></span>
            <div class="name">
              发票
            </div>
            <div class="code-name">.icon-invoice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daipingjia"></span>
            <div class="name">
              待评价
            </div>
            <div class="code-name">.icon-daipingjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daishiyong"></span>
            <div class="name">
              待使用
            </div>
            <div class="code-name">.icon-daishiyong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouhou"></span>
            <div class="name">
              售后
            </div>
            <div class="code-name">.icon-shouhou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daifukuan"></span>
            <div class="name">
              待付款
            </div>
            <div class="code-name">.icon-daifukuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lecaiicon_hetong-yiguoqi"></span>
            <div class="name">
              乐才icon_42合同-已过期
            </div>
            <div class="code-name">.icon-lecaiicon_hetong-yiguoqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yiguoqi"></span>
            <div class="name">
              已过期
            </div>
            <div class="code-name">.icon-yiguoqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yishiyong"></span>
            <div class="name">
              已使用
            </div>
            <div class="code-name">.icon-yishiyong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youhuiquan"></span>
            <div class="name">
              优惠券
            </div>
            <div class="code-name">.icon-youhuiquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daolan"></span>
            <div class="name">
              导览
            </div>
            <div class="code-name">.icon-daolan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daolan1"></span>
            <div class="name">
              导览
            </div>
            <div class="code-name">.icon-daolan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tingche1"></span>
            <div class="name">
              停车
            </div>
            <div class="code-name">.icon-tingche1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanchu2"></span>
            <div class="name">
              演出
            </div>
            <div class="code-name">.icon-yanchu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuanneiyanchu"></span>
            <div class="name">
              园内演出
            </div>
            <div class="code-name">.icon-yuanneiyanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanchu-"></span>
            <div class="name">
              演出-01
            </div>
            <div class="code-name">.icon-yanchu-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weibiaoti2fuzhi02"></span>
            <div class="name">
              优惠券
            </div>
            <div class="code-name">.icon-weibiaoti2fuzhi02
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoqiankuozhan_wode-325"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.icon-biaoqiankuozhan_wode-325
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoqianA01_gouwuche-04"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-biaoqianA01_gouwuche-04
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoqianA01_shouye-21"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-biaoqianA01_shouye-21
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoqiankuozhan_faxian-134"></span>
            <div class="name">
              发现
            </div>
            <div class="code-name">.icon-biaoqiankuozhan_faxian-134
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoqiankuozhan_faxian-161"></span>
            <div class="name">
              发现
            </div>
            <div class="code-name">.icon-biaoqiankuozhan_faxian-161
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoqiankuozhan_gouwudai-209"></span>
            <div class="name">
              购物袋
            </div>
            <div class="code-name">.icon-biaoqiankuozhan_gouwudai-209
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ai48"></span>
            <div class="name">
              购物
            </div>
            <div class="code-name">.icon-ai48
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shengtaihuanjing"></span>
            <div class="name">
              生态 环境
            </div>
            <div class="code-name">.icon-shengtaihuanjing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kaipiaozhushou"></span>
            <div class="name">
              kaipiaozhushou
            </div>
            <div class="code-name">.icon-kaipiaozhushou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_food"></span>
            <div class="name">
              icon_food
            </div>
            <div class="code-name">.icon-icon_food
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_houserent"></span>
            <div class="name">
              icon_houserent
            </div>
            <div class="code-name">.icon-icon_houserent
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_shopping"></span>
            <div class="name">
              icon_shopping
            </div>
            <div class="code-name">.icon-icon_shopping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanbu"></span>
            <div class="name">
              全部
            </div>
            <div class="code-name">.icon-quanbu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hezu"></span>
            <div class="name">
              合租
            </div>
            <div class="code-name">.icon-hezu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dituzhaofang"></span>
            <div class="name">
              地图找房
            </div>
            <div class="code-name">.icon-dituzhaofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wodeqianbao"></span>
            <div class="name">
              我的钱包
            </div>
            <div class="code-name">.icon-wodeqianbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jingdian"></span>
            <div class="name">
              景点
            </div>
            <div class="code-name">.icon-jingdian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tingche"></span>
            <div class="name">
              停车
            </div>
            <div class="code-name">.icon-tingche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bath"></span>
            <div class="name">
              bath
            </div>
            <div class="code-name">.icon-bath
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-building-type-400000-18"></span>
            <div class="name">
              building-type-400000-18
            </div>
            <div class="code-name">.icon-building-type-400000-18
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fapiao"></span>
            <div class="name">
              发票
            </div>
            <div class="code-name">.icon-fapiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanchu"></span>
            <div class="name">
              演出
            </div>
            <div class="code-name">.icon-yanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Bridgeinterruption"></span>
            <div class="name">
              Bridgeinterruption
            </div>
            <div class="code-name">.icon-Bridgeinterruption
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-building-type-140000-18"></span>
            <div class="name">
              building-type-140000-18
            </div>
            <div class="code-name">.icon-building-type-140000-18
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-building-type-300000-18"></span>
            <div class="name">
              building-type-300000-18
            </div>
            <div class="code-name">.icon-building-type-300000-18
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-building-type-199999-18"></span>
            <div class="name">
              building-type-199999-18
            </div>
            <div class="code-name">.icon-building-type-199999-18
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-building-type-180000-18"></span>
            <div class="name">
              building-type-180000-18
            </div>
            <div class="code-name">.icon-building-type-180000-18
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-building-15"></span>
            <div class="name">
              building-15
            </div>
            <div class="code-name">.icon-building-15
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-building-type-700000-18"></span>
            <div class="name">
              building-type-700000-18
            </div>
            <div class="code-name">.icon-building-type-700000-18
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-car-15"></span>
            <div class="name">
              car-15
            </div>
            <div class="code-name">.icon-car-15
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kefuzixunhui"></use>
                </svg>
                <div class="name">客服咨询灰</div>
                <div class="code-name">#icon-kefuzixunhui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zaixianzixun"></use>
                </svg>
                <div class="name">在线咨询</div>
                <div class="code-name">#icon-zaixianzixun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-woyaofankui"></use>
                </svg>
                <div class="name">我要反馈</div>
                <div class="code-name">#icon-woyaofankui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-changjianwentibangzhu"></use>
                </svg>
                <div class="name">常见问题 帮助</div>
                <div class="code-name">#icon-changjianwentibangzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi1"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zixun1"></use>
                </svg>
                <div class="name">咨询</div>
                <div class="code-name">#icon-zixun1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yijianfankui-tianchong"></use>
                </svg>
                <div class="name">意见反馈-填充</div>
                <div class="code-name">#icon-yijianfankui-tianchong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-changjianwenti"></use>
                </svg>
                <div class="name">常见问题</div>
                <div class="code-name">#icon-changjianwenti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bill"></use>
                </svg>
                <div class="name">票据</div>
                <div class="code-name">#icon-bill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-saoyisao"></use>
                </svg>
                <div class="name">扫一扫</div>
                <div class="code-name">#icon-saoyisao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongju1"></use>
                </svg>
                <div class="name">工具1</div>
                <div class="code-name">#icon-gongju1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youhuiquan-copy"></use>
                </svg>
                <div class="name">优惠券</div>
                <div class="code-name">#icon-youhuiquan-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fapiao1"></use>
                </svg>
                <div class="name">发票</div>
                <div class="code-name">#icon-fapiao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yijianfankui"></use>
                </svg>
                <div class="name">意见反馈</div>
                <div class="code-name">#icon-yijianfankui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdan"></use>
                </svg>
                <div class="name">订单</div>
                <div class="code-name">#icon-dingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jifen2"></use>
                </svg>
                <div class="name">积分</div>
                <div class="code-name">#icon-jifen2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan3"></use>
                </svg>
                <div class="name">门票</div>
                <div class="code-name">#icon-ziyuan3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huiyuanzhongxin"></use>
                </svg>
                <div class="name">会员中心</div>
                <div class="code-name">#icon-huiyuanzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zixunbeifen"></use>
                </svg>
                <div class="name">咨询</div>
                <div class="code-name">#icon-zixunbeifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huiyuandengji"></use>
                </svg>
                <div class="name">会员等级</div>
                <div class="code-name">#icon-huiyuandengji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zulinguanli"></use>
                </svg>
                <div class="name">租赁管理</div>
                <div class="code-name">#icon-zulinguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huiyuan1"></use>
                </svg>
                <div class="name">会员</div>
                <div class="code-name">#icon-huiyuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youhuiquan1"></use>
                </svg>
                <div class="name">优惠券</div>
                <div class="code-name">#icon-youhuiquan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jifen1"></use>
                </svg>
                <div class="name">积分</div>
                <div class="code-name">#icon-jifen1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dizhi2"></use>
                </svg>
                <div class="name">地址</div>
                <div class="code-name">#icon-dizhi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-drxx66"></use>
                </svg>
                <div class="name">意见反馈</div>
                <div class="code-name">#icon-drxx66</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zixun"></use>
                </svg>
                <div class="name">咨询</div>
                <div class="code-name">#icon-zixun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huiyuanjifen"></use>
                </svg>
                <div class="name">会员积分</div>
                <div class="code-name">#icon-huiyuanjifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fapiaoguanlixitong"></use>
                </svg>
                <div class="name">发票管理系统</div>
                <div class="code-name">#icon-fapiaoguanlixitong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huiyuan"></use>
                </svg>
                <div class="name">会员</div>
                <div class="code-name">#icon-huiyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dizhi"></use>
                </svg>
                <div class="name">地址</div>
                <div class="code-name">#icon-dizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dizhi1"></use>
                </svg>
                <div class="name">地址</div>
                <div class="code-name">#icon-dizhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuozhanVIP"></use>
                </svg>
                <div class="name">扩展VIP</div>
                <div class="code-name">#icon-kuozhanVIP</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vipdiamond-f"></use>
                </svg>
                <div class="name">vipdiamond-f</div>
                <div class="code-name">#icon-vipdiamond-f</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vipdiamond-l"></use>
                </svg>
                <div class="name">vipdiamond-l</div>
                <div class="code-name">#icon-vipdiamond-l</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jifen"></use>
                </svg>
                <div class="name">积分</div>
                <div class="code-name">#icon-jifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan"></use>
                </svg>
                <div class="name">地址</div>
                <div class="code-name">#icon-ziyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qianbao"></use>
                </svg>
                <div class="name">钱包</div>
                <div class="code-name">#icon-qianbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang1"></use>
                </svg>
                <div class="name">收 藏 (1)</div>
                <div class="code-name">#icon-shoucang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yilingqu1"></use>
                </svg>
                <div class="name">已领取</div>
                <div class="code-name">#icon-yilingqu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiandai"></use>
                </svg>
                <div class="name">钱袋</div>
                <div class="code-name">#icon-qiandai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiaozhizuomoban-131"></use>
                </svg>
                <div class="name">设备借还</div>
                <div class="code-name">#icon-tubiaozhizuomoban-131</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiechu"></use>
                </svg>
                <div class="name">借出</div>
                <div class="code-name">#icon-jiechu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-invoice"></use>
                </svg>
                <div class="name">发票</div>
                <div class="code-name">#icon-invoice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daipingjia"></use>
                </svg>
                <div class="name">待评价</div>
                <div class="code-name">#icon-daipingjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daishiyong"></use>
                </svg>
                <div class="name">待使用</div>
                <div class="code-name">#icon-daishiyong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouhou"></use>
                </svg>
                <div class="name">售后</div>
                <div class="code-name">#icon-shouhou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daifukuan"></use>
                </svg>
                <div class="name">待付款</div>
                <div class="code-name">#icon-daifukuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lecaiicon_hetong-yiguoqi"></use>
                </svg>
                <div class="name">乐才icon_42合同-已过期</div>
                <div class="code-name">#icon-lecaiicon_hetong-yiguoqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yiguoqi"></use>
                </svg>
                <div class="name">已过期</div>
                <div class="code-name">#icon-yiguoqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yishiyong"></use>
                </svg>
                <div class="name">已使用</div>
                <div class="code-name">#icon-yishiyong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youhuiquan"></use>
                </svg>
                <div class="name">优惠券</div>
                <div class="code-name">#icon-youhuiquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daolan"></use>
                </svg>
                <div class="name">导览</div>
                <div class="code-name">#icon-daolan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daolan1"></use>
                </svg>
                <div class="name">导览</div>
                <div class="code-name">#icon-daolan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tingche1"></use>
                </svg>
                <div class="name">停车</div>
                <div class="code-name">#icon-tingche1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanchu2"></use>
                </svg>
                <div class="name">演出</div>
                <div class="code-name">#icon-yanchu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuanneiyanchu"></use>
                </svg>
                <div class="name">园内演出</div>
                <div class="code-name">#icon-yuanneiyanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanchu-"></use>
                </svg>
                <div class="name">演出-01</div>
                <div class="code-name">#icon-yanchu-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weibiaoti2fuzhi02"></use>
                </svg>
                <div class="name">优惠券</div>
                <div class="code-name">#icon-weibiaoti2fuzhi02</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqiankuozhan_wode-325"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#icon-biaoqiankuozhan_wode-325</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqianA01_gouwuche-04"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-biaoqianA01_gouwuche-04</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqianA01_shouye-21"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-biaoqianA01_shouye-21</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqiankuozhan_faxian-134"></use>
                </svg>
                <div class="name">发现</div>
                <div class="code-name">#icon-biaoqiankuozhan_faxian-134</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqiankuozhan_faxian-161"></use>
                </svg>
                <div class="name">发现</div>
                <div class="code-name">#icon-biaoqiankuozhan_faxian-161</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqiankuozhan_gouwudai-209"></use>
                </svg>
                <div class="name">购物袋</div>
                <div class="code-name">#icon-biaoqiankuozhan_gouwudai-209</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ai48"></use>
                </svg>
                <div class="name">购物</div>
                <div class="code-name">#icon-ai48</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shengtaihuanjing"></use>
                </svg>
                <div class="name">生态 环境</div>
                <div class="code-name">#icon-shengtaihuanjing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kaipiaozhushou"></use>
                </svg>
                <div class="name">kaipiaozhushou</div>
                <div class="code-name">#icon-kaipiaozhushou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_food"></use>
                </svg>
                <div class="name">icon_food</div>
                <div class="code-name">#icon-icon_food</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_houserent"></use>
                </svg>
                <div class="name">icon_houserent</div>
                <div class="code-name">#icon-icon_houserent</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_shopping"></use>
                </svg>
                <div class="name">icon_shopping</div>
                <div class="code-name">#icon-icon_shopping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanbu"></use>
                </svg>
                <div class="name">全部</div>
                <div class="code-name">#icon-quanbu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hezu"></use>
                </svg>
                <div class="name">合租</div>
                <div class="code-name">#icon-hezu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dituzhaofang"></use>
                </svg>
                <div class="name">地图找房</div>
                <div class="code-name">#icon-dituzhaofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wodeqianbao"></use>
                </svg>
                <div class="name">我的钱包</div>
                <div class="code-name">#icon-wodeqianbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jingdian"></use>
                </svg>
                <div class="name">景点</div>
                <div class="code-name">#icon-jingdian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tingche"></use>
                </svg>
                <div class="name">停车</div>
                <div class="code-name">#icon-tingche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bath"></use>
                </svg>
                <div class="name">bath</div>
                <div class="code-name">#icon-bath</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-building-type-400000-18"></use>
                </svg>
                <div class="name">building-type-400000-18</div>
                <div class="code-name">#icon-building-type-400000-18</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fapiao"></use>
                </svg>
                <div class="name">发票</div>
                <div class="code-name">#icon-fapiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanchu"></use>
                </svg>
                <div class="name">演出</div>
                <div class="code-name">#icon-yanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Bridgeinterruption"></use>
                </svg>
                <div class="name">Bridgeinterruption</div>
                <div class="code-name">#icon-Bridgeinterruption</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-building-type-140000-18"></use>
                </svg>
                <div class="name">building-type-140000-18</div>
                <div class="code-name">#icon-building-type-140000-18</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-building-type-300000-18"></use>
                </svg>
                <div class="name">building-type-300000-18</div>
                <div class="code-name">#icon-building-type-300000-18</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-building-type-199999-18"></use>
                </svg>
                <div class="name">building-type-199999-18</div>
                <div class="code-name">#icon-building-type-199999-18</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-building-type-180000-18"></use>
                </svg>
                <div class="name">building-type-180000-18</div>
                <div class="code-name">#icon-building-type-180000-18</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-building-15"></use>
                </svg>
                <div class="name">building-15</div>
                <div class="code-name">#icon-building-15</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-building-type-700000-18"></use>
                </svg>
                <div class="name">building-type-700000-18</div>
                <div class="code-name">#icon-building-type-700000-18</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-car-15"></use>
                </svg>
                <div class="name">car-15</div>
                <div class="code-name">#icon-car-15</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
